<template>
  <div class="feature-management-container">
    <div class="feature-management-header">
      <h1>地理要素管理</h1>
      <p>管理北京景点地理要素信息</p>
    </div>

    <el-row :gutter="20">
      <!-- 左侧地图区域 -->
      <el-col :span="16">
        <el-card class="map-card">
          <div id="featureMapView" class="map-container"></div>

          <!-- 状态指示器 - 添加模式 -->
          <div class="status-indicator" v-if="isAddingMode">
            <div class="pulse-dot"></div>
            <span>请在地图上选择景点位置</span>
            <el-button size="small" @click="cancelAddingMode" class="cancel-btn">取消</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧功能区域 -->
      <el-col :span="8">
        <el-card class="action-card">
          <template #header>
            <div class="card-header">
              <span>操作面板</span>
            </div>
          </template>

          <div class="action-buttons">
            <el-button type="primary" @click="startAddingMode">
              <el-icon><Plus /></el-icon>添加景点
            </el-button>
            <el-button type="warning" :disabled="!selectedFeatureId" @click="openEditForm">
              <el-icon><Edit /></el-icon>编辑景点
            </el-button>
            <el-button type="danger" :disabled="!selectedFeatureId" @click="deleteFeature">
              <el-icon><Delete /></el-icon>删除景点
            </el-button>
          </div>

          <div v-if="selectedFeatureId" class="selected-feature-info">
            <h3>已选择: {{ selectedFeatureName }}</h3>
            <p v-if="selectedFeatureType">类型: {{ selectedFeatureType }}</p>
          </div>

          <div v-else class="no-selection-tip">
            <el-alert
              title="请在地图上选择一个景点以进行编辑或删除操作"
              type="info"
              :closable="false"
              show-icon
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 景点列表 -->
    <el-card class="feature-list-card">
      <template #header>
        <div class="card-header">
          <span>景点列表</span>
          <el-input
            v-model="searchQuery"
            placeholder="搜索景点名称"
            class="search-input"
            clearable
            prefix-icon="Search"
          />
        </div>
      </template>

      <el-table :data="tableData" style="width: 100%" v-loading="loading" @row-click="handleRowClick">
        <el-table-column prop="attributes.OBJECTID" label="ID" width="80" />
        <el-table-column prop="attributes.SpotName" label="景点名称" />
        <el-table-column prop="attributes.SpotType" label="类型" />
        <el-table-column prop="attributes.ProtectionLevel" label="保护级别" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button size="small" type="primary" @click.stop="viewFeatureDetails(scope.row)">
              查看
            </el-button>
            <el-button size="small" type="warning" @click.stop="editFeature(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑表单抽屉 -->
    <el-drawer
      v-model="showFormDrawer"
      :title="isEditing ? '编辑景点' : '添加景点'"
      direction="rtl"
      size="500px"
      :before-close="handleFormClose"
    >
      <el-form :model="formData" label-position="top" class="feature-form" ref="formRef">
        <!-- 基本信息部分 -->
        <el-divider content-position="left">基本信息</el-divider>

        <el-form-item label="景点名称" prop="SpotName" :rules="[{ required: true, message: '请输入景点名称', trigger: 'blur' }]">
          <el-input v-model="formData.SpotName" placeholder="请输入景点名称"></el-input>
        </el-form-item>

        <el-form-item label="景点类型" prop="SpotType" :rules="[{ required: true, message: '请选择景点类型', trigger: 'change' }]">
          <el-select v-model="formData.SpotType" placeholder="请选择景点类型" class="full-width">
            <el-option label="历史文化" value="历史文化"></el-option>
            <el-option label="自然风光" value="自然风光"></el-option>
            <el-option label="休闲娱乐" value="休闲娱乐"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="景点简介" prop="SpotIntroduction">
          <el-input
            v-model="formData.SpotIntroduction"
            type="textarea"
            :rows="3"
            placeholder="请输入景点简介"
          ></el-input>
        </el-form-item>

        <!-- 保护信息部分 -->
        <el-divider content-position="left">保护信息</el-divider>

        <el-form-item label="保护级别" prop="ProtectionLevel">
          <el-select v-model="formData.ProtectionLevel" placeholder="请选择保护级别" class="full-width">
            <el-option label="国家级" value="国家级"></el-option>
            <el-option label="市级" value="市级"></el-option>
            <el-option label="区级" value="区级"></el-option>
            <el-option label="一般景点" value="一般景点"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="建设年份" prop="ConstructionYear">
          <el-input v-model="formData.ConstructionYear" placeholder="请输入建设年份"></el-input>
        </el-form-item>

        <el-form-item label="保护状态" prop="ProtectionStatus">
          <el-select v-model="formData.ProtectionStatus" placeholder="请选择保护状态" class="full-width">
            <el-option label="良好" value="良好"></el-option>
            <el-option label="一般" value="一般"></el-option>
            <el-option label="需维护" value="需维护"></el-option>
            <el-option label="危险" value="危险"></el-option>
          </el-select>
        </el-form-item>

        <!-- 文化价值部分 -->
        <el-divider content-position="left">文化价值</el-divider>

        <el-form-item label="历史价值" prop="HistoricalValue">
          <el-input
            v-model="formData.HistoricalValue"
            type="textarea"
            :rows="2"
            placeholder="请输入历史价值描述"
          ></el-input>
        </el-form-item>

        <el-form-item label="文化价值" prop="CulturalValue">
          <el-input
            v-model="formData.CulturalValue"
            type="textarea"
            :rows="2"
            placeholder="请输入文化价值描述"
          ></el-input>
        </el-form-item>

        <!-- 教育信息部分 -->
        <el-divider content-position="left">教育信息</el-divider>



        <el-form-item label="学习提示" prop="LearningTips">
          <el-input
            v-model="formData.LearningTips"
            type="textarea"
            :rows="2"
            placeholder="请输入学习提示"
          ></el-input>
        </el-form-item>

        <!-- 参观规则部分 -->
        <el-divider content-position="left">参观规则</el-divider>

        <el-form-item label="参观规则" prop="VisitRules">
          <el-input
            v-model="formData.VisitRules"
            type="textarea"
            :rows="3"
            placeholder="请输入参观规则"
          ></el-input>
        </el-form-item>

        <!-- 不文明行为信息 -->
        <el-divider content-position="left">不文明行为信息</el-divider>

        <el-form-item label="不文明行为信息" prop="UncivilizedBehaviorReportMessageJSON">
          <el-alert
            title="不文明行为信息不可手动管理"
            type="info"
            :closable="false"
            show-icon
            description="不文明行为信息由用户举报生成，管理员可在不文明行为管理页面进行审核"
          />
        </el-form-item>

        <el-form-item class="form-actions">
          <el-button type="primary" @click="saveFeature">
            <el-icon><Check /></el-icon> 保存
          </el-button>
          <el-button @click="showFormDrawer = false">
            <el-icon><Close /></el-icon> 取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 详情抽屉 -->
    <el-drawer
      v-model="showDetailsDrawer"
      title="景点详情"
      direction="rtl"
      size="500px"
    >
      <div v-if="currentFeature" class="feature-details">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="景点名称">
            {{ currentFeature.attributes.SpotName || '无' }}
          </el-descriptions-item>

          <el-descriptions-item label="景点类型">
            <el-tag :type="getTypeTagType(currentFeature.attributes.SpotType)">
              {{ currentFeature.attributes.SpotType || '无' }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="景点简介">
            {{ currentFeature.attributes.SpotIntroduction || '无简介信息' }}
          </el-descriptions-item>

          <el-descriptions-item label="保护级别">
            {{ currentFeature.attributes.ProtectionLevel || '无' }}
          </el-descriptions-item>

          <el-descriptions-item label="建设年份">
            {{ currentFeature.attributes.ConstructionYear || '无' }}
          </el-descriptions-item>

          <el-descriptions-item label="保护状态">
            <el-tag :type="getProtectionStatusTagType(currentFeature.attributes.ProtectionStatus)">
              {{ currentFeature.attributes.ProtectionStatus || '无' }}
            </el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="历史价值">
            {{ currentFeature.attributes.HistoricalValue || '无' }}
          </el-descriptions-item>

          <el-descriptions-item label="文化价值">
            {{ currentFeature.attributes.CulturalValue || '无' }}
          </el-descriptions-item>



          <el-descriptions-item label="学习提示">
            {{ currentFeature.attributes.LearningTips || '无' }}
          </el-descriptions-item>

          <el-descriptions-item label="参观规则">
            {{ currentFeature.attributes.VisitRules || '无' }}
          </el-descriptions-item>

          <el-descriptions-item label="不文明行为举报数">
            {{ currentFeature.attributes.UncivilizedBehaviorReportCount || '0' }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="details-actions">
          <el-button type="primary" @click="editFeature(currentFeature)">
            <el-icon><Edit /></el-icon> 编辑景点
          </el-button>
        </div>
      </div>
      <div v-else class="no-feature-selected">
        <el-empty description="没有选中景点"></el-empty>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, reactive } from 'vue'
import { Plus, Edit, Delete, Check, Close } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'

// 地图和图层
let view: __esri.MapView
let featureLayer: __esri.FeatureLayer
let newPointLocation: Point | null = null

// 声明全局变量类型
declare global {
  interface Window {
    _tempFeatures: any[]
  }
}

// 状态变量
const loading = ref(true)
const searchQuery = ref('')
const tableData = ref<any[]>([])
const selectedFeatureId = ref<number | null>(null)
const selectedFeatureName = ref('')
const selectedFeatureType = ref('')
const isAddingMode = ref(false)
const showFormDrawer = ref(false)
const showDetailsDrawer = ref(false)
const isEditing = ref(false)
const currentFeature = ref<any>(null) // 存储提取的属性数据，不存储ESRI对象
const formRef = ref<FormInstance>()

// 从要素中提取属性数据
const extractFeatureData = (feature: any) => {
  if (!feature || !feature.attributes) return null

  return {
    attributes: { ...feature.attributes },
    // 存储坐标信息，但不存储完整的geometry对象
    geometryInfo: feature.geometry ? {
      x: feature.geometry.x,
      y: feature.geometry.y,
      type: feature.geometry.type
    } : null
  }
}

// 表单数据
const formData = reactive({
  SpotName: '',
  SpotType: '',
  SpotIntroduction: '',
  ProtectionLevel: '',
  ConstructionYear: '',
  ProtectionStatus: '',
  HistoricalValue: '',
  CulturalValue: '',
  LearningTips: '',
  VisitRules: '',
  UncivilizedBehaviorReportCount: 0,
  UncivilizedBehaviorReportMessageJSON: ''
})

// 查询景点数据
const queryFeatures = async () => {
  if (!featureLayer) return

  loading.value = true
  try {
    // 创建查询
    const query = featureLayer.createQuery()

    // 如果有搜索条件，添加到查询中
    if (searchQuery.value) {
      query.where = `SpotName LIKE '%${searchQuery.value}%'`
    } else {
      query.where = '1=1' // 查询所有记录
    }

    query.outFields = ['*']

    // 执行查询
    const result = await featureLayer.queryFeatures(query)

    // 存储原始的ESRI要素对象到非响应式变量中
    window._tempFeatures = result.features

    // 将要素ID和属性数据存储到响应式变量中
    tableData.value = result.features.map((feature, index) => ({
      // 存储原始要素的索引，供后续使用
      _index: index,
      // 复制属性数据
      attributes: { ...feature.attributes }
    }))
  } catch (error) {
    console.error('查询景点数据失败', error)
    tableData.value = []
  } finally {
    loading.value = false
  }
}

// 监听搜索条件变化
watch(searchQuery, () => {
  queryFeatures()
})

// 初始化地图
const initMap = async () => {
  // 创建地图实例
  const map = new Map({
    basemap: {
      baseLayers: [gaodeLayer]
    }
  })

  // 创建地图视图
  view = new MapView({
    container: 'featureMapView',
    map: map,
    center: [116.3912, 39.9073], // 北京市中心坐标
    zoom: 12,
    popup: {
      dockEnabled: true,
      dockOptions: {
        buttonEnabled: false,
        breakpoint: false
      }
    }
  })

  // 创建要素图层
  featureLayer = new FeatureLayer({
    url: 'https://services7.arcgis.com/2irArZCaO94Te7ab/arcgis/rest/services/ScenicPointLayer/FeatureServer/0',
    outFields: ['*'],
    popupEnabled: false,
    renderer: {
      type: "unique-value",
      field: "SpotType",
      defaultSymbol: {
        type: "simple-marker",
        size: 14,
        color: [156, 156, 156, 0.8], // 默认灰色
        outline: {
          color: [255, 255, 255],
          width: 2
        }
      },
      uniqueValueInfos: [
        {
          value: "历史文化",
          symbol: {
            type: "simple-marker",
            size: 14,
            color: [225, 76, 66, 0.8], // 红色
            outline: {
              color: [255, 255, 255],
              width: 2
            }
          }
        },
        {
          value: "自然风光",
          symbol: {
            type: "simple-marker",
            size: 14,
            color: [56, 168, 0, 0.8], // 绿色
            outline: {
              color: [255, 255, 255],
              width: 2
            }
          }
        },
        {
          value: "休闲娱乐",
          symbol: {
            type: "simple-marker",
            size: 14,
            color: [0, 112, 255, 0.8], // 蓝色
            outline: {
              color: [255, 255, 255],
              width: 2
            }
          }
        }
      ]
    },
    // 添加标注
    labelingInfo: [{
      symbol: {
        type: "text",
        color: "#333333",
        haloColor: "#ffffff",
        haloSize: 2,
        font: {
          size: 12,
          weight: "normal"
        }
      },
      labelPlacement: "above-center",
      labelExpressionInfo: {
        expression: "$feature.SpotName"
      },
      minScale: 5000, // 当地图缩放到多少比例尺以内才显示标签
      maxScale: 0
    }]
  })

  // 将图层添加到地图
  map.add(featureLayer)

  // 添加点击事件监听器以选择要素
  view.on('click', async (event) => {
    if (isAddingMode.value) {
      handleAddingModeClick(event)
      return
    }

    const hitResults = (await view?.hitTest(event))?.results as __esri.MapViewGraphicHit[]
    const feature = hitResults.find((result) => result.layer?.id === featureLayer?.id)?.graphic

    if (feature) {
      selectedFeatureId.value = feature.attributes.OBJECTID
      selectedFeatureName.value = feature.attributes.SpotName || `景点 #${selectedFeatureId.value}`
      selectedFeatureType.value = feature.attributes.SpotType || ''

      // 添加高亮效果
      view?.graphics.removeAll()
      const highlightSymbol = new SimpleMarkerSymbol({
        color: [255, 255, 255, 0.8],
        size: 16,
        outline: {
          color: [0, 122, 194],
          width: 3,
        },
      })

      const highlightGraphic = new Graphic({
        geometry: feature.geometry,
        symbol: highlightSymbol,
      })

      view?.graphics.add(highlightGraphic)
    } else {
      selectedFeatureId.value = null
      selectedFeatureName.value = ''
      selectedFeatureType.value = ''
      view?.graphics.removeAll()
    }
  })

  // 加载要素数据
  await loadFeatures()
}

// 加载要素数据
const loadFeatures = async () => {
  await queryFeatures()
}

// 启动添加模式
const startAddingMode = () => {
  isAddingMode.value = true

  // 更改鼠标样式
  if (view?.container) {
    (view.container as HTMLElement).style.cursor = 'crosshair'
  }
}

// 取消添加模式
const cancelAddingMode = () => {
  isAddingMode.value = false
  newPointLocation = null

  // 还原鼠标样式
  if (view?.container) {
    (view.container as HTMLElement).style.cursor = 'default'
  }

  view?.graphics.removeAll()
}

// 处理添加模式下的点击
const handleAddingModeClick = (event: __esri.ViewClickEvent) => {
  // 创建一个点
  newPointLocation = new Point({
    longitude: event.mapPoint.longitude,
    latitude: event.mapPoint.latitude,
    spatialReference: view?.spatialReference,
  })

  // 显示临时标记
  view?.graphics.removeAll()
  const tempSymbol = new SimpleMarkerSymbol({
    color: [0, 122, 194, 0.5],
    size: 14,
    outline: {
      color: [255, 255, 255],
      width: 2,
    },
  })

  const tempGraphic = new Graphic({
    geometry: newPointLocation,
    symbol: tempSymbol,
  })

  view?.graphics.add(tempGraphic)

  // 打开创建表单
  isAddingMode.value = false
  isEditing.value = false
  currentFeature.value = null // 新建模式下没有当前要素
  showFormDrawer.value = true

  // 还原鼠标样式
  if (view?.container) {
    (view.container as HTMLElement).style.cursor = 'default'
  }
}

// 打开编辑表单
const openEditForm = () => {
  if (!selectedFeatureId.value) {
    ElMessage.warning('请先选择一个景点')
    return
  }

  isEditing.value = true
  loadFeatureDetails(selectedFeatureId.value)
}

// 加载要素详情
const loadFeatureDetails = async (featureId: number) => {
  try {
    // 查询选中的要素
    if (!featureLayer) {
      ElMessage.error('图层未初始化')
      return
    }

    const query = featureLayer.createQuery()
    query.where = `OBJECTID = ${featureId}`
    query.outFields = ['*']

    const result = await featureLayer.queryFeatures(query)
    const feature = result.features[0]

    if (feature) {
      currentFeature.value = extractFeatureData(feature)
      // 填充表单数据
      resetForm()
      Object.keys(formData).forEach(key => {
        if (feature.attributes[key] !== undefined) {
          // @ts-ignore
          formData[key] = feature.attributes[key]
        }
      })



      showFormDrawer.value = true
    }
  } catch (error) {
    console.error('加载景点详情失败', error)
    ElMessage.error('加载景点详情失败')
  }
}

// 删除要素
const deleteFeature = async () => {
  if (!selectedFeatureId.value) {
    ElMessage.warning('请先选择一个景点')
    return
  }

  try {
    await ElMessageBox.confirm(`确定要删除景点 "${selectedFeatureName.value}" 吗？`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const attributes = {
      OBJECTID: selectedFeatureId.value,
    }
    // 创建一个新的图形对象
    const deleteFeature = new Graphic({
      attributes: attributes,
    })

    await featureLayer?.applyEdits({
      deleteFeatures: [deleteFeature],
    })

    ElMessage.success('景点已删除')
    selectedFeatureId.value = null
    selectedFeatureName.value = ''
    selectedFeatureType.value = ''
    view?.graphics.removeAll()

    // 重新加载数据
    await loadFeatures()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除景点失败', error)
      ElMessage.error('删除景点失败')
    }
  }
}

// 查看要素详情
const viewFeatureDetails = (row: any) => {
  // 从非响应式存储中获取原始要素
  const originalFeature = window._tempFeatures?.[row._index]

  // 提取属性数据
  currentFeature.value = extractFeatureData(originalFeature)
  showDetailsDrawer.value = true

  // 在地图上高亮显示
  highlightFeatureOnMap(originalFeature)
}

// 编辑要素
const editFeature = (row: any) => {
  // 从非响应式存储中获取原始要素
  const originalFeature = window._tempFeatures?.[row._index]

  // 提取属性数据
  currentFeature.value = extractFeatureData(originalFeature)
  isEditing.value = true
  showFormDrawer.value = true

  // 在地图上高亮显示
  highlightFeatureOnMap(originalFeature)
}

// 在地图上高亮显示要素
const highlightFeatureOnMap = (feature: any) => {
  if (!feature || !feature.geometry) return

  // 清除之前的高亮
  view?.graphics.removeAll()

  // 创建高亮符号
  const highlightSymbol = new SimpleMarkerSymbol({
    color: [255, 255, 255, 0.8],
    size: 16,
    outline: {
      color: [0, 122, 194],
      width: 3,
    },
  })

  // 创建高亮图形
  const highlightGraphic = new Graphic({
    geometry: feature.geometry,
    symbol: highlightSymbol,
  })

  // 添加到地图
  view?.graphics.add(highlightGraphic)

  // 将视图中心移动到要素位置
  view?.goTo({
    target: feature.geometry,
    zoom: 15
  })

  // 更新选中状态
  selectedFeatureId.value = feature.attributes.OBJECTID
  selectedFeatureName.value = feature.attributes.SpotName || `景点 #${selectedFeatureId.value}`
  selectedFeatureType.value = feature.attributes.SpotType || ''
}

// 处理表格行点击
const handleRowClick = (row: any) => {
  // 从非响应式存储中获取原始要素
  const originalFeature = window._tempFeatures?.[row._index]
  highlightFeatureOnMap(originalFeature)
}

// 保存要素
const saveFeature = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning('请填写必填字段')
      return
    }

    try {
      if (!featureLayer) {
        ElMessage.error('图层未初始化')
        return
      }

      // 准备属性数据
      const attributes = { ...formData }



      if (isEditing.value && selectedFeatureId.value) {
        // 更新现有要素
        const updateFeature = new Graphic({
          attributes: {
            OBJECTID: selectedFeatureId.value,
            ...attributes,
          },
        })

        const result = await featureLayer.applyEdits({
          updateFeatures: [updateFeature],
        })

        if (result.updateFeatureResults.length > 0) {
          ElMessage.success('景点已更新')
          showFormDrawer.value = false
          await loadFeatures()
        } else {
          ElMessage.error('更新景点失败')
        }
      } else {
        // 创建新要素
        if (!newPointLocation) {
          ElMessage.warning('无法获取景点位置')
          return
        }

        const graphic = new Graphic({
          geometry: newPointLocation,
          attributes: attributes,
        })

        const result = await featureLayer.applyEdits({
          addFeatures: [graphic],
        })

        if (result.addFeatureResults.length > 0) {
          ElMessage.success('景点已创建')
          newPointLocation = null
          showFormDrawer.value = false
          await loadFeatures()
        } else {
          ElMessage.error('创建景点失败')
        }
      }
    } catch (error) {
      console.error('保存景点失败', error)
      ElMessage.error('保存景点失败')
    }
  })
}

// 重置表单
const resetForm = () => {
  Object.keys(formData).forEach(key => {
    // @ts-ignore
    formData[key] = key === 'UncivilizedBehaviorReportCount' ? 0 : ''
  })
}

// 处理表单关闭
const handleFormClose = (done: () => void) => {
  ElMessageBox.confirm('关闭表单将丢失未保存的数据，是否确定关闭？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    resetForm()
    done()
  }).catch(() => {
    // 取消关闭
  })
}

// 获取类型标签类型
const getTypeTagType = (type: string): string => {
  const typeMap: Record<string, string> = {
    '历史文化': 'danger',
    '自然风光': 'success',
    '休闲娱乐': 'primary'
  }
  return typeMap[type] || 'info'
}

// 获取保护状态标签类型
const getProtectionStatusTagType = (status: string): string => {
  const statusMap: Record<string, string> = {
    '良好': 'success',
    '一般': 'info',
    '需维护': 'warning',
    '危险': 'danger'
  }
  return statusMap[status] || 'info'
}



onMounted(() => {
  // 初始化全局变量
  window._tempFeatures = []
  initMap()
})
</script>

<style scoped>
.feature-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.feature-management-header {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-left: 4px solid #409eff;
}

.feature-management-header h1 {
  font-size: 24px;
  color: #303133;
  margin-bottom: 8px;
}

.feature-management-header p {
  color: #606266;
  font-size: 14px;
}

.map-card, .action-card, .feature-list-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
}

.map-container {
  height: 500px;
  width: 100%;
  position: relative;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  width: 250px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.selected-feature-info {
  background-color: #f0f9eb;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border-left: 4px solid #67c23a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selected-feature-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.selected-feature-info p {
  margin: 5px 0;
  color: #606266;
}

.no-selection-tip {
  margin-bottom: 20px;
}

.status-indicator {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pulse-dot {
  width: 12px;
  height: 12px;
  background-color: #67c23a;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}

.cancel-btn {
  margin-left: 10px;
}

/* 表单样式 */
.feature-form {
  padding: 10px 20px;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.full-width {
  width: 100%;
}

/* 知识点相关样式 */
.knowledge-points-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.knowledge-point-item {
  display: flex;
  align-items: center;
}

.knowledge-point-input {
  flex: 1;
}

.add-knowledge-btn {
  margin-top: 10px;
  align-self: flex-start;
}

/* 详情页样式 */
.feature-details {
  padding: 20px;
}

.details-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.no-feature-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.knowledge-points-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knowledge-point-tag {
  margin-bottom: 5px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .feature-management-container {
    padding: 10px;
  }

  .map-container {
    height: 350px;
  }

  .search-input {
    width: 150px;
  }
}
</style>
